<!-- 运营消息类型 -->
<template>
  <div class="temp-container">
    <!-- 消息名称 -->
    <div class="">
      <el-card class="box-card">
        <div slot="header">
          <span class="col_title">消息名称</span>
        </div>
        <el-form
          :model="operateForm"
          :rules="operateRules"
          ref="operateForm"
          label-width="100px"
        >
          <el-form-item label="消息名称" prop="name">
            <el-input
              style="width: 50%; margin-left: 100px"
              v-model="operateForm.name"
              maxlength="32"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </el-card>
    </div>

    <!-- 选择用户 -->
    <el-card
      class="box-card"
      customClass="customClass"
      v-loading="loading"
      element-loading-text="正在计算选择的人数"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(255,255,255,0)"
    >
      <div slot="header">
        <span class="col_title">选择用户</span>
      </div>
      <el-form
        :model="operateForm.configData"
        :rules="userRules"
        ref="userForm"
        label-width="100px"
        class="demo-operateForm"
      >
        <!-- 用户角色 -->
        <el-form-item label="用户角色" prop="userType">
          <el-radio-group
            class="form-item"
            @change="changeUserType"
            v-model="operateForm.configData.userType"
          >
            <el-radio label="STUDENT">学员</el-radio>
            <el-radio label="CONSULTANT">顾问</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 学员的选择用户范围 -->
        <el-form-item
          label="用户范围"
          prop="userRange"
          v-show="operateForm.configData.userType == 'STUDENT'"
        >
          <el-radio-group
            class="form-item"
            @change="clearStudentCount"
            v-model="operateForm.configData.studentConfig.userRange"
          >
            <el-radio label="ALL">全部学员</el-radio>
            <el-radio label="COLLEGE_STUDENT">学院学员</el-radio>
            <el-radio label="LOGIN_TIME">登录时间</el-radio>
            <el-radio label="DESIGNATED_STUDENT">指定EXCEL导入学员</el-radio>
            <el-radio label="GROUPING_STUDENT">学员分组</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 顾问 -->
        <el-form-item
          label="用户范围"
          prop="userRange"
          v-show="operateForm.configData.userType == 'CONSULTANT'"
        >
          <el-radio-group
            class="form-item"
            @change="clearConsultantCache"
            v-model="operateForm.configData.consultantConfig.userRange"
          >
            <el-radio label="ALL">全部顾问</el-radio>
            <el-radio label="COLLEGE_CONSULTANT">学院顾问</el-radio>
            <el-radio label="IMPORT_CONSULTANT">导入</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 顾问 且 导入 -->
        <el-form-item
          prop="userDataId"
          v-if="
            operateForm.configData.userType === 'CONSULTANT' &&
              operateForm.configData.consultantConfig.userRange ===
                'IMPORT_CONSULTANT'
          "
        >
          <span class="form-item">共{{ importSuccessNum }}人</span>
          <el-button
            type="success"
            icon="el-icon-plus"
            style="margin-left: 10px"
            @click="bulkImport"
            >批量导入</el-button
          >
          <el-button
            type="success"
            icon="el-icon-minus"
            @click="clearAllCounselor"
            >全部清空</el-button
          >
        </el-form-item>
        <!--顾问 且 学院顾问-->
        <el-form-item
          label="选择学院"
          prop="collegeIds"
          v-if="
            operateForm.configData.userType === 'CONSULTANT' &&
              operateForm.configData.consultantConfig.userRange ===
                'COLLEGE_CONSULTANT'
          "
        >
          <el-checkbox
            class="form-item"
            :indeterminate="isConsultantIndeterminate"
            v-model="consultantCheckAllCollege"
            @change="handleConsultantCheckAll"
            >全部学院</el-checkbox
          >
          <el-checkbox-group
            class="form-item"
            v-model="operateForm.configData.consultantConfig.collegeIds"
            @change="handleConsultantCheckedChange"
          >
            <el-checkbox
              v-for="item in colleges"
              :label="item.id"
              :key="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
          <div class="view-total" @click="viewsNum('guwen', 'isView')">
            查看人数
          </div>
          <div class="hint">
            说明：消息发送时会做发送号码和发送内容的去重，最终发送人数以详情页的【发送数量】为准；
          </div>
        </el-form-item>
        <!-- 学员（全部学员） -->
        <el-form-item
          v-if="
            operateForm.configData.studentConfig.userRange === 'ALL' &&
              operateForm.configData.userType === 'STUDENT'
          "
        >
          <div class="view-total" @click="viewsNum('allStu', 'isView')">
            查看人数
          </div>
          <div class="hint">
            说明：消息发送时会做发送号码和发送内容的去重，最终发送人数以详情页的【发送数量】为准；
          </div>
        </el-form-item>
        <!-- 学员（学院学员） -->
        <el-form-item
          label="选择学院"
          prop="collegeIds"
          v-show="
            operateForm.configData.userType == 'STUDENT' &&
              operateForm.configData.studentConfig.userRange ==
                'COLLEGE_STUDENT'
          "
        >
          <el-checkbox
            class="form-item"
            :indeterminate="isStudentIndeterminate"
            v-model="studentCheckAllCollege"
            @change="handleStudentCheckAll"
            >全部学院</el-checkbox
          >
          <el-checkbox-group
            class="form-item"
            v-model="operateForm.configData.studentConfig.collegeIds"
            @change="handleStudentCheckedChange"
          >
            <el-checkbox
              v-for="item in colleges"
              :label="item.id"
              :key="item.id"
              >{{ item.name }}</el-checkbox
            >
          </el-checkbox-group>
          <div class="view-total" @click="viewsNum('xueyuan', 'isView')">
            查看人数
          </div>
          <div class="hint">
            说明：消息发送时会做发送号码和发送内容的去重，最终发送人数以详情页的【发送数量】为准；
          </div>
        </el-form-item>
        <!-- 登陆时间 -->
        <el-form-item
          label="登录时间"
          prop="loginTime"
          v-show="
            operateForm.configData.userType == 'STUDENT' &&
              operateForm.configData.studentConfig.userRange == 'LOGIN_TIME'
          "
        >
          <el-date-picker
            class="form-item"
            v-model="loginTime"
            size="small"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="handleLoginTimeChange"
          >
          </el-date-picker>
          <div class="view-total" @click="viewsNum('time', 'isView')">
            查看人数
          </div>
          <div class="hint">
            说明：消息发送时会做发送号码和发送内容的去重，最终发送人数以详情页的【发送数量】为准；
          </div>
        </el-form-item>
        <!-- 指定EXCEL导入学员 -->
        <el-form-item
          prop="userIds"
          v-show="
            operateForm.configData.userType == 'STUDENT' &&
              operateForm.configData.studentConfig.userRange ==
                'DESIGNATED_STUDENT'
          "
        >
          <div class="totalNum">
            <span> 共{{ studentCount }}人 </span>
            <span @click="handleImport" class="batch"> +批量导入 </span>
            <span @click="clearAll" class="clearAll"> -全部清空 </span>
          </div>
          <div class="hint">
            说明：消息发送时会做发送号码和发送内容的去重，最终发送人数以详情页的【发送数量】为准；
          </div>
        </el-form-item>
        <!-- 学员分组 -->
        <el-form-item
          prop="groupIds"
          v-show="
            operateForm.configData.userType == 'STUDENT' &&
              operateForm.configData.studentConfig.userRange ==
                'GROUPING_STUDENT'
          "
        >
          <div class="studentGrouping">
            <div class="studentGrouping__btn">
              <el-button
                type="success"
                @click="handleGrouping"
                class="grouping"
              >
                +选择分组
              </el-button>
              <el-button
                type="success"
                @click="createGrouping"
                class="createGroup"
                v-if="this.userGroupingPermission"
              >
                创建分组
              </el-button>
            </div>
            <div class="table-box">
              <el-table
                ref="table"
                stripe
                v-loading="loading"
                :data="operateForm.configData.studentConfig.userGroupList"
                :fit="true"
                max-height="490"
              >
                <el-table-column label="分组名称" prop="name" align="center">
                </el-table-column>
                <el-table-column label="人数" prop="totalNumber" align="center">
                </el-table-column>
                <el-table-column
                  label="计算状态"
                  prop="finalCalculationStatus"
                  align="center"
                >
                  <template slot-scope="scope">
                    <span>{{
                      scope.row.finalCalculationStatus | calcStatusFilter
                    }}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="view-total" @click="viewsNum('fenzu', 'isView')">
            查看人数
          </div>
          <div class="hint">
            说明：消息发送时会做发送号码和发送内容的去重，最终发送人数以详情页的【发送数量】为准；
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 发送渠道 -->
    <el-card class="box-card">
      <div slot="header">
        <span class="col_title">发送渠道</span>
      </div>
      <!-- 短信渠道 -->
      <el-form
        :model="channelsList.sms"
        :rules="smsRules"
        ref="smsForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- 渠道短信 -->
        <el-form-item label="选择渠道" prop="sms">
          <div class="channel-wrap">
            <el-checkbox
              class="channel-checkbox"
              label="SMS"
              v-model="smsChecked"
              @change="smsCheckedChange"
              >短信</el-checkbox
            >
            <p v-if="smsChecked">注意：短信是收费项目，请谨慎选择！</p>
          </div>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item prop="signature">
              <div class="channel-content">
                <div slot="header">
                  <span>签名</span>
                </div>
                <div>
                  <el-select
                    v-model="channelsList.sms.signature"
                    placeholder="请选择签名"
                    @change="handleSignatureChange"
                  >
                    <el-option
                      v-for="item in signatures"
                      :key="item.dictValue"
                      :label="item.dictLabel"
                      :value="item.dictLabel"
                    >
                    </el-option>
                  </el-select>
                </div>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="userinfo">
              <div class="channel-content">
                <div slot="header">
                  <span>用户信息</span>
                </div>
                <div>
                  <el-select v-model="userinfo" placeholder="请选择用户信息">
                    <el-option
                      v-for="item in userinfos"
                      :key="item.indexName"
                      :label="item.indexNameStr"
                      :value="item.indexName"
                    >
                    </el-option>
                  </el-select>
                  <el-button
                    class="userinfo-btn"
                    type="primary"
                    @click="handleUserinfoChange"
                    >确定</el-button
                  >
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="content">
          <div class="channel-content">
            <div slot="header">
              <span>编辑内容</span>
              <span class="header-tip">
                <el-button type="text" @click="handleTipClick"
                  >点击查看短信规则<i class="el-icon-info el-icon--right"></i
                ></el-button>
              </span>
            </div>
            <div>
              <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入通知内容"
                v-model="channelsList.sms.content"
                maxlength="195"
                show-word-limit
                @input="handleSmsContentChange"
              >
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="link-content">
            <span class="short-link">短链</span>
            <el-input
              v-model="smsLink"
              placeholder="请输入内容"
              style="flex: 1"
            ></el-input>
            <span @click="changeChain('sms')" class="row_center short-link-btn"
              >转链并插入</span
            >
          </div>
        </el-form-item>
      </el-form>
      <!-- 钉钉渠道 -->
      <el-form
        v-show="operateForm.configData.userType === 'CONSULTANT'"
        :model="channelsList.dingtalk"
        :rules="dingtalkRules"
        ref="dingtalkForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="dingtalk">
          <div class="channel-wrap">
            <el-checkbox
              class="channel-checkbox"
              label="DINGTALK"
              v-model="dingtalkChecked"
              @change="dingCheckedChange"
              >钉钉</el-checkbox
            >
          </div>
        </el-form-item>
        <el-form-item prop="title">
          <div class="channel-content">
            <el-input
              type="text"
              placeholder="请输入通知标题"
              v-model="channelsList.dingtalk.title"
              maxlength="32"
              show-word-limit
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="content">
          <div class="channel-content">
            <div slot="header">
              <span>编辑内容</span>
            </div>
            <div class="markdown-body quill-box" style="width: 100%">
              <mavon-editor
                ref="md"
                :toolbars="markdownOption"
                @imgAdd="$imgAdd"
                v-model="dingContent"
                :subfield="true"
              />
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="channel-content">
            <div slot="header">
              <span>附件</span>
            </div>
            <div style="display: flex; align-items: center">
              <el-upload
                ref="upload"
                :http-request="() => {}"
                class="upload-demo"
                accept=".jpg,.jpeg,.png,.gif,.mp4,.zip,.rar,.webm,.ogg"
                action="#"
                :before-upload="getFiles"
                multiple
                :limit="5"
                :show-file-list="false"
                :on-exceed="handleExceed"
                :file-list="fileList"
              >
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>
            </div>
            <div
              style="display: flex"
              class=""
              v-loading="fileLoading"
              v-if="channelsList.dingtalk.annexes.length > 0"
            >
              <div
                v-for="(item, index) of channelsList.dingtalk.annexes"
                :key="index"
                class="fileListFlex"
              >
                <div class="fileItemLeft">
                  <img
                    v-if="filterFileTypeImg(item.name)"
                    src="@assets/img/fileType-picture.svg"
                    alt=""
                    class="icon"
                  />
                  <img
                    v-if="filterFileTypeZip(item.name)"
                    src="@assets/img/fileType-package.svg"
                    alt=""
                    class="icon"
                  />
                  <img
                    v-if="filterFileTypeVedio(item.name)"
                    src="@assets/img/fileType-video.svg"
                    alt=""
                    class="icon"
                  />
                </div>
                <div class="fileItemRight">
                  <div class="itemRightTop">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      placement="top-start"
                    >
                      <div slot="content">{{ item.name }}</div>
                      <span
                        style="
                          width: 50%;
                          overflow: hidden;
                          white-space: nowrap;
                          text-overflow: ellipsis;
                        "
                        >{{ item.name }}</span
                      >
                    </el-tooltip>
                  </div>
                  <div class="itemRightBottom">
                    <span
                      @click="preview(index)"
                      class="preview-color"
                      v-if="!filterFileTypeZip(item.name)"
                      >预览</span
                    ><span class="delete-color" @click="deleteFile(index)"
                      >删除</span
                    >
                  </div>
                </div>
              </div>
            </div>
            <div class="fileHintSize">
              <div>支持上传的附件</div>
              <div>1、图片：支持span png、 jpg、gif、 jpeg等格式；</div>
              <div>2、视频：支持MP4、WebM、Ogg等格式；</div>
              <div>3、压缩包：支持ZIP、RAR格式；</div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <!-- 渠道站内信 -->
      <el-form
        v-show="operateForm.configData.userType === 'STUDENT'"
        :model="channelsList.notice"
        :rules="noticeRules"
        ref="noticeForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="notice">
          <div class="channel-wrap">
            <el-checkbox
              class="channel-checkbox"
              label="NOTICE"
              v-model="noticeChecked"
              @change="noticeCheckedChange"
              >站内信</el-checkbox
            >
          </div>
        </el-form-item>
        <el-form-item prop="title">
          <div class="channel-content">
            <el-input
              type="text"
              placeholder="请输入站内信标题"
              v-model="channelsList.notice.title"
              maxlength="32"
              show-word-limit
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="content">
          <div class="channel-content">
            <div slot="header">
              <span>编辑内容</span>
            </div>
            <div>
              <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入通知内容"
                v-model="channelsList.notice.content"
                maxlength="300"
                show-word-limit
              >
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="link">
          <div class="push-content">
            <el-row style="margin-left: 100px">
              <el-col :span="5">
                <el-select
                  v-model="channelsList.notice.noticeAction"
                  @change="noticeTypeChange"
                >
                  <el-option label="跳转页面" value="THIRD_LINK"
                    >跳转页面</el-option
                  >
                  <el-option label="跳转到小程序" value="OPEN_WECHAT_APPLET"
                    >跳转小程序</el-option
                  >
                </el-select>
              </el-col>
              <el-col
                :span="16"
                v-if="channelsList.notice.noticeAction === 'OPEN_WECHAT_APPLET'"
                class="wx-text"
              >
                <div class="wx-text-inner">
                  <div class="wx-text-inner">
                    <el-input
                      v-model.trim="channelsList.notice.noticeActionLink"
                      placeholder="请输入小程序ID"
                      style="width: 80%; margin-left: 5px"
                      class="wxChatErrorText"
                    >
                    </el-input>
                    <span>格式范例：gh_1631cfa47236</span>
                  </div>
                </div>
                <div class="wx-text-inner">
                  <el-input
                    v-model.trim="channelsList.notice.path"
                    placeholder=" 请输入跳转页面"
                    style="width: 90%; margin-left: 5px"
                  >
                  </el-input>
                  <span>格式范例：pages/login/login</span>
                </div>
                <div class="wx-text-inner">
                  <el-input
                    v-model.trim="channelsList.notice.params"
                    placeholder="请输入参数"
                    style="width: 90%; margin-left: 5px"
                  >
                  </el-input>
                  <span>格式范例： path=index&source=dpxy8</span>
                </div>
              </el-col>
              <el-col
                :span="8"
                v-if="channelsList.notice.noticeAction === 'THIRD_LINK'"
              >
                <el-input
                  v-model.trim="channelsList.notice.noticeActionLink"
                  placeholder="请输入跳转链接"
                  style="width: 80%; margin-left: 5px"
                >
                </el-input>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
        <el-form-item prop="noticeImage">
          <div class="playscreen-wrap">
            <span style="margin-right: 20px; float: left">图片</span>
            <uploadSingImg
              :imgUrl="channelsList.notice.noticeImage"
              accept=".jpg,.png,.gif"
              :maxSize="5"
              @getImgUrl="getNoticeImgUrl"
              :showDeleteIcon="true"
            ></uploadSingImg>
            <div style="margin-left: 80px">
              建议尺寸要求：330*330，JPG、GIF、PNG格式
            </div>
          </div>
        </el-form-item>
      </el-form>
      <!-- 渠道推送 -->
      <el-form
        v-show="operateForm.configData.userType === 'STUDENT'"
        :model="channelsList.push"
        :rules="pushRules"
        ref="pushForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="push">
          <div class="channel-wrap">
            <el-checkbox
              class="channel-checkbox"
              label="PUSH"
              v-model="pushChecked"
              @change="pushCheckedChange"
              >推送</el-checkbox
            >
            <p v-if="pushChecked">注意：推送是收费项目，请谨慎选择!</p>
          </div>
        </el-form-item>
        <el-form-item prop="title">
          <div class="channel-content">
            <el-input
              type="text"
              placeholder="请输入推送标题"
              v-model="channelsList.push.title"
              maxlength="30"
              show-word-limit
            >
            </el-input>
          </div>
        </el-form-item>
        <el-form-item prop="content">
          <div class="channel-content">
            <div slot="header">
              <span>编辑内容</span>
            </div>
            <div>
              <el-input
                type="textarea"
                :rows="10"
                placeholder="请输入通知内容"
                v-model="channelsList.push.content"
                maxlength="128"
                show-word-limit
              >
              </el-input>
            </div>
          </div>
        </el-form-item>
        <el-form-item prop="link">
          <div class="push-content">
            <el-row style="margin-left: 100px">
              <el-col :span="2">
                <span>后续动作</span>
              </el-col>

              <el-col :span="5">
                <el-select
                  v-model="channelsList.push.pushType"
                  @change="pushTypeChange"
                >
                  <el-option label="启动应用" value="OPEN_APP"
                    >启动应用</el-option
                  >
                  <el-option label="打开第三方链接" value="THIRD_LINK"
                    >打开第三方链接</el-option
                  >
                  <el-option label="跳转应用内特定页面" value="OPEN_APP_LINK"
                    >跳转应用内特定页面</el-option
                  >
                  <el-option label="跳转到小程序" value="OPEN_WECHAT_APPLET"
                    >跳转到小程序</el-option
                  >
                </el-select>
              </el-col>

              <el-col
                :span="5"
                v-if="channelsList.push.pushType === 'OPEN_APP_LINK'"
              >
                <el-select
                  v-model="channelsList.push.appJumpPage"
                  placeholder="请选择跳转页面"
                  style="width: 300px; margin-left: 5px"
                >
                  <el-option
                    v-for="item in appJumpOption"
                    :key="item.dictLabel"
                    :label="item.dictValue"
                    :value="item.dictLabel"
                    >{{ item.dictValue }}</el-option
                  >
                </el-select>
              </el-col>

              <el-col
                :span="5"
                v-if="channelsList.push.pushType === 'OPEN_APP_LINK'"
              >
                <el-input
                  v-model.trim="channelsList.push.link"
                  placeholder="请输入页面地址"
                  style="width: 80%; margin-left: 30px"
                >
                </el-input>
              </el-col>
              <el-col
                :span="16"
                v-if="channelsList.push.pushType === 'OPEN_WECHAT_APPLET'"
                class="wx-text"
              >
                <div class="wx-text-inner">
                  <div class="wx-text-inner">
                    <el-input
                      v-model.trim="channelsList.push.link"
                      placeholder="请输入小程序ID"
                      style="width: 80%; margin-left: 5px"
                    >
                    </el-input>
                    <span>格式范例：gh_1631cfa47236</span>
                  </div>
                </div>
                <div class="wx-text-inner">
                  <el-input
                    v-model.trim="channelsList.push.path"
                    placeholder=" 请输入跳转页面"
                    style="width: 90%; margin-left: 5px"
                  >
                  </el-input>
                  <span>格式范例：pages/login/login</span>
                </div>
                <div class="wx-text-inner">
                  <el-input
                    v-model.trim="channelsList.push.params"
                    placeholder="请输入参数"
                    style="width: 90%; margin-left: 5px"
                  >
                  </el-input>
                  <span>格式范例： path=index&source=dpxy8</span>
                </div>
              </el-col>

              <el-col
                :span="8"
                v-if="channelsList.push.pushType === 'THIRD_LINK'"
              >
                <el-input
                  v-model.trim="channelsList.push.link"
                  placeholder="请输入跳转链接"
                  style="width: 80%; margin-left: 5px"
                >
                </el-input>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
      <!-- 渠道弹屏 -->
      <el-form
        v-show="operateForm.configData.userType === 'STUDENT'"
        :model="channelsList.playscreen"
        :rules="playscreenRules"
        ref="playscreenForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item prop="playscreen">
          <div class="channel-wrap">
            <el-checkbox
              class="channel-checkbox"
              label="PLAYSCREEN"
              v-model="playscreenChecked"
              @change="playscreenCheckedChange"
            >
              弹屏
            </el-checkbox>
          </div>
        </el-form-item>

        <el-form-item prop="bombScreenType">
          <div class="playscreen-wrap">
            <span style="margin-right: 20px">显示端口</span>
            <el-radio-group v-model="channelsList.playscreen.bombScreenType">
              <el-radio label="APP">APP</el-radio>
              <el-radio label="PC">PC</el-radio>
              <el-radio label="H5">H5</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>

        <el-form-item prop="bombScreenImage">
          <div class="playscreen-wrap">
            <span style="margin-right: 20px; float: left">弹屏图片</span>
            <uploadSingImg
              :imgUrl="channelsList.playscreen.bombScreenImage"
              accept=".jpg,.png,.gif"
              :maxSize="5"
              @getImgUrl="getImgUrl"
              :showDeleteIcon="true"
            ></uploadSingImg>
            <div style="margin-left: 80px">
              建议尺寸要求：330*330，JPG、GIF、PNG格式
            </div>
          </div>
        </el-form-item>

        <el-form-item prop="link">
          <div class="link-content">
            <span class="short-link">跳转链接</span>
            <el-input
              style="flex: 1"
              v-model="channelsList.playscreen.link"
              placeholder="请输入跳转链接"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item prop="bombScreenExpiryTime">
          <div class="link-content">
            <span class="short-link">到期时间</span>
            <el-date-picker
              style="flex: 1"
              v-model="channelsList.playscreen.bombScreenExpiryTime"
              type="datetime"
              placeholder="选择日期时间"
              format="yyyy-MM-dd HH:mm:ss"
              value-format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </div>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 发送时间 -->
    <el-card class="box-card">
      <div slot="header">
        <span class="col_title">发送时间</span>
      </div>
      <el-form
        :model="operateForm.configData"
        :rules="timeRules"
        ref="timeForm"
        label-width="100px"
        class="demo-operateForm"
      >
        <el-form-item label="选择时间" prop="sendTimeType">
          <el-radio-group
            v-model="operateForm.configData.sendTimeType"
            class="form-item"
            @change="sendTimeTypeChange"
          >
            <el-radio label="SEND_IMMEDIATELY">立即发送</el-radio>
            <el-radio label="TIMED_SENDING" class="send-time"
              >定时发送</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item
          prop="sendTime"
          v-show="operateForm.configData.sendTimeType == 'TIMED_SENDING'"
        >
          <el-date-picker
            v-model="operateForm.configData.sendTime"
            type="datetime"
            size="small"
            placeholder="选择日期时间"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="form-item"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div class="row_center">
        <el-button type="success" @click="saveTemp" :disabled="isDisabled"
          >保存</el-button
        >
        <el-button type="info" @click="cancle">取消</el-button>
      </div>
    </el-card>

    <importFilesDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @showResults="showResults"
    ></importFilesDialog>
    <studentGroupingDialog
      v-if="studentDialogData.isShow"
      :dialog-data="studentDialogData"
      @selectGroup="selectGroup"
    ></studentGroupingDialog>
    <selectedNumDialog :formLimit="formLimit"></selectedNumDialog>
    <resultDialog :form="dataReault" :dataReault="dataReault"></resultDialog>
    <CommonImportDialog
      :params="params"
      @importSuccess="importSuccess"
      @importFail="importFail"
    />
    <CommomSucessDialog :successParams="successParams" />
    <CommonFailDialog :failParams="failParams" />
    <PreviewVideo
      :previewVideoParams="previewVideoParams"
      v-if="previewVideoParams.centerDialogVisible"
    />
    <el-image-viewer
      v-if="showViewer"
      :on-close="
        () => {
          showViewer = false
        }
      "
      :url-list="imgList"
    >
    </el-image-viewer>
  </div>
</template>

<script>
import '@assets/css/quill.snow.css'

import {
  counselorNum,
  createTemplate,
  collegeList,
  studentAllStudent,
  LoginTimeStudentCount,
  collegeGetAllStudent,
  templateData,
  compileOperation,
  turnChain,
  lastMobile,
  uploadAccessory
} from '@/api/notice'
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { clearTagMixins } from '@/mixins/clearTag'
import uploadSingImg from '@common/uploadSingImg' // 上传单个图片公共组件
import resultDialog from '@/components/messageManagement/template/resultDialog'
import importFilesDialog from '@/components/messageManagement/template/importFilesDialog' // 导入弹窗
import selectedNumDialog from '@/components/messageManagement/template/selectedNumDialog'
import studentGroupingDialog from '@/components/messageManagement/template/studentGroupingDialog' // 学院分组弹窗
import CommonImportDialog from '@/components/common/commonImportDialog/commonImportDialog'
import CommomSucessDialog from '@/components/common/commonImportDialog/commomSucessDialog'
import CommonFailDialog from '@/components/common/commonImportDialog/commonFailDialog'
import PreviewVideo from '@/components/messageManagement/template/previewVideo'

const calcStatusDic = {
  SUCCESS: { text: '成功' },
  FAIL: { text: '失败' },
  CALCULATING: { text: '计算中' }
}
export default {
  name: 'operationTemplate',
  mixins: [clearTagMixins],
  data() {
    // 校验短信渠道
    var validateUserRange = (rule, value, callback) => {
      if (
        this.operateForm.configData.userType === 'STUDENT' &&
        this.operateForm.configData.studentConfig.userRange === ''
      ) {
        callback(new Error('请选择用户范围'))
      } else if (
        this.operateForm.configData.userType === 'CONSULTANT' &&
        this.operateForm.configData.consultantConfig.userRange === ''
      ) {
        callback(new Error('请选择用户范围'))
      } else {
        callback()
      }
    }
    // 校验选择学院
    var validateUserCollegeIds = (rule, value, callback) => {
      if (
        this.operateForm.configData.userType === 'STUDENT' &&
        this.operateForm.configData.studentConfig.userRange ===
          'COLLEGE_STUDENT' &&
        this.operateForm.configData.studentConfig.collegeIds.length < 1
      ) {
        callback(new Error('请选择学院'))
      } else if (
        this.operateForm.configData.userType === 'CONSULTANT' &&
        this.operateForm.configData.consultantConfig.userRange ===
          'COLLEGE_CONSULTANT' &&
        this.operateForm.configData.consultantConfig.collegeIds.length < 1
      ) {
        callback(new Error('请选择学院'))
      } else {
        callback()
      }
    }
    //校验顾问导入是否为空
    var validUserDataId = (rule, value, callback) => {
      if (this.importSuccessNum === 0) {
        callback(new Error('请检查是否导入顾问'))
      } else {
        callback()
      }
    }
    // 校验登录时间
    var validateLoginTime = (rule, value, callback) => {
      if (
        this.operateForm.configData.userType === 'STUDENT' &&
        this.operateForm.configData.studentConfig.userRange === 'LOGIN_TIME' &&
        this.loginTime.length < 1
      ) {
        callback(new Error('请选择校验登录时间'))
      } else {
        callback()
      }
    }
    // 校验短信渠道
    var validateSmsChannels = (rule, value, callback) => {
      if (
        this.smsChecked ||
        this.dingtalkChecked ||
        this.noticeChecked ||
        this.pushChecked ||
        this.playscreenChecked
      ) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 校验短信内容渠道
    var validateSmsContent = (rule, value, callback) => {
      if (this.smsChecked) {
        if (!this.channelsList.sms.signature) {
          callback(new Error('请选择签名'))
        } else if (value === '') {
          callback(new Error('请输入通知内容'))
        } else if (value.length > 195) {
          callback(new Error('输入内容超过最大长度限制'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var validateDingTitle = (rule, value, callback) => {
      if (this.dingtalkChecked) {
        if (value == '') {
          callback(new Error('请输入标题'))
        } else {
          callback()
        }
      }
    }
    // 校验钉钉渠道
    var validateDingChannels = (rule, value, callback) => {
      if (
        this.smsChecked ||
        this.dingtalkChecked ||
        this.noticeChecked ||
        this.pushChecked ||
        this.playscreenChecked
      ) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 校验短信内容渠道
    var validateDingContent = (rule, value, callback) => {
      if (this.dingtalkChecked) {
        if (this.dingContent === '') {
          callback(new Error('请输入通知内容'))
        } else if (this.dingContent.length > 4000) {
          callback(new Error('输入内容超过最大长度限制'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验站内信渠道
    var validateNoticeChannels = (rule, value, callback) => {
      if (
        this.smsChecked ||
        this.dingtalkChecked ||
        this.noticeChecked ||
        this.pushChecked ||
        this.playscreenChecked
      ) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 校验站内信渠道内容
    var validateNoticeContent = (rule, value, callback) => {
      if (this.noticeChecked) {
        if (value === '') {
          callback(new Error('请输入通知内容'))
        } else if (value.length > 195) {
          callback(new Error('输入内容超过最大长度限制'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验站内信渠道标题
    var validateNoticeTitle = (rule, value, callback) => {
      if (this.noticeChecked) {
        if (value === '') {
          callback(new Error('请输入站内信标题'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验站内信图片
    var validateNoticePhoto = (rule, value, callback) => {
      if (this.playscreenChecked) {
        if (value === '') {
          callback(new Error('请选择站内信图片'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var validWechatId = (rule, vallue, callback) => {
      if (this.noticeChecked) {
        if (
          !this.channelsList.notice.noticeActionLink &&
          this.channelsList.notice.noticeAction === 'OPEN_WECHAT_APPLET'
        ) {
          callback(new Error('请输入小程序ID'))
        }
      }
    }
    // 校验推送标题
    var validatePushTitle = (rule, value, callback) => {
      if (this.pushChecked) {
        if (value == '') {
          callback(new Error('请选择推送标题'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验推送渠道
    var validatePushChannels = (rule, value, callback) => {
      if (
        this.smsChecked ||
        this.dingtalkChecked ||
        this.noticeChecked ||
        this.pushChecked ||
        this.playscreenChecked
      ) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 校验推送渠道内容
    var validatePushContent = (rule, value, callback) => {
      if (this.pushChecked) {
        if (value === '') {
          callback(new Error('请输入通知内容'))
        } else if (value.length > 128) {
          callback(new Error('输入内容超过最大长度限制'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验推送渠道链接
    var validatePushLink = (rule, value, callback) => {
      if (this.pushChecked) {
        if (
          this.channelsList.push.pushType === 'THIRD_LINK' &&
          this.channelsList.push.link === ''
        ) {
          callback(new Error('请输入跳转链接'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 检验url的正确性
    var validaePatternLink = (rule, value, callback) => {
      if (this.pushChecked) {
        let oRegUrl = new RegExp()
        oRegUrl.compile(
          '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]'
        )
        if (
          this.channelsList.push.pushType == 'THIRD_LINK' &&
          !oRegUrl.test(this.channelsList.push.link)
        ) {
          callback(new Error('请输入正确的详情链接url'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验定时发送时间
    var validateSendTime = (rule, value, callback) => {
      if (
        this.operateForm.configData.sendTimeType === 'TIMED_SENDING' &&
        value
      ) {
        callback()
      } else if (
        this.operateForm.configData.sendTimeType === 'SEND_IMMEDIATELY'
      ) {
        callback()
      } else {
        callback(new Error('请选择定时发送时间'))
      }
    }
    var validatorPushActionLink = (rule, value, callback) => {
      if (this.pushChecked) {
        if (
          this.channelsList.push.pushType === 'OPEN_WECHAT_APPLET' &&
          !this.channelsList.push.link
        ) {
          callback(new Error('请输入小程序ID'))
        }
      }
    }
    // 检验弹屏
    var validatePlayscreenChannels = (rule, value, callback) => {
      if (
        this.smsChecked ||
        this.dingtalkChecked ||
        this.noticeChecked ||
        this.pushChecked ||
        this.playscreenChecked
      ) {
        callback()
      } else {
        callback(new Error('请选择渠道'))
      }
    }
    // 校验弹屏端口
    var validateScreenPort = (rule, value, callback) => {
      if (this.playscreenChecked) {
        if (value === '') {
          callback(new Error('请选择端口'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验弹屏图片
    var validateScreenPhoto = (rule, value, callback) => {
      if (this.playscreenChecked) {
        if (value === '') {
          callback(new Error('请选择弹屏图片'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    // 校验弹屏时间
    var validateExpirationTime = (rule, value, callback) => {
      if (this.playscreenChecked) {
        if (value) {
          callback()
        } else {
          callback(new Error('到期时间不能为空,请选择到期时间'))
        }
      } else {
        callback()
      }
    }
    // channelsList.dingtalk.content"
    return {
      markdownOption: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: false, // 下划线
        strikethrough: false, // 中划线
        mark: false, // 标记
        superscript: false, // 上角标
        subscript: false, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        code: false, // code
        table: false, // 表格
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: true, // 展示html源码
        help: true, // 帮助
        /* 1.3.5 */
        undo: true, // 上一步
        redo: true, // 下一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: false, // 导航目录
        /* 2.1.8 */
        alignleft: false, // 左对齐
        aligncenter: false, // 居中
        alignright: false, // 右对齐
        /* 2.2.1 */
        subfield: true, // 单双栏模式
        preview: true // 预览
      },
      fileList: [],
      dingContent: '',
      showViewer: false,
      fileLoading: false,
      previewVideoParams: {
        centerDialogVisible: false
      },
      filesArray: [],
      formData: null,
      fullscreenLoading: '',
      params: {
        centerDialogVisible: false,
        title: '导入工号',
        downLoadFileName: '导入工号表'
      },
      successParams: {
        centerDialogVisible: false,
        successText: ''
      },
      failParams: {
        centerDialogVisible: false,
        failText: ''
      },
      operateRules: {
        name: {
          required: true,
          message: '消息名称不能为空',
          trigger: 'blur'
        }
      },
      isDisabled: false,
      loading: false,
      pickerOptions: {
        disabledDate(time) {
          //此条为设置禁止用户选择今天之前的日期，包含今天。
          // return time.getTime() <= (Date.now());
          //此条为设置禁止用户选择今天之前的日期，不包含今天。
          return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        }
      },
      studentCount: 0,
      // 渠道参数
      messageChannels: [],
      loginTime: [],
      dataReault: {
        isShow: false,
        importSucess: '',
        cutCoyp: '',
        importFail: '',
        type: 'dps',
        isSuccess: false
      },

      importDialogData: {
        title: '',
        isShow: false, // 控制弹框显示
        params: 'message'
      },
      //学院分组弹窗
      studentDialogData: {
        title: '',
        isShow: false, // 控制弹框显示
        params: 'message',
        userGroupList: [], //学员分组列表信息
        selectionId: [] //选中id
      },
      formLimit: {
        visible: false,
        value: ''
      },
      consultantCheckAllCollege: false,
      studentCheckAllCollege: false,
      checkedcolleges: [],
      colleges: [],
      isConsultantIndeterminate: false,
      isStudentIndeterminate: false,
      signature: '',
      userinfo: '',
      signatures: [],
      userinfos: [],
      importSuccessNum: 0,
      userGroupingPermission: false, //用户分组权限
      // 选中值绑定的数据
      operateForm: {
        name: '', //消息名称
        messageTemplateAlias: 'OPERATION_MESSAGE_TEMPLATE', //模板类型(运营消息/服务期优惠消息)
        userDataId: '',
        configData: {
          userType: 'STUDENT', //用户类型（学员/顾问）
          sendTimeType: '', //发送类型
          sendTime: '', //发送时间
          consultantConfig: {
            //顾问配置数据
            collegeIds: [], //学院ids
            userRange: null, //全部顾问/学院顾问
            importNums: null
          },
          studentConfig: {
            //学员配置数据
            collegeIds: [], //学院ids
            loginTimeEnd: '', //登录结束时间
            loginTimeStart: '', //登录开始时间
            groupIds: [], //用户分组ids
            userIds: [], //excel导入学员数据列表
            userGroupList: [], //学员分组信息
            userRange: null //全部学员/学院学员/登录时间/指定EXCEL导入/学员分组
          }
        }, //配置信息
        messageChannels: [], //消息发送渠道配置
        status: '' //状态
      },
      smsChecked: false,
      smsLink: '', // 短信短链接
      dingtalkChecked: false,
      dingLink: '',
      noticeChecked: false,
      pushChecked: false,
      playscreenChecked: false,
      appJumpOption: [],
      attachmentLists: [], //附件
      channelsList: {
        // 短信(转换链接后将短链前后加空格追加到内容后面)
        sms: {
          content: '',
          type: 'SMS'
        },
        // 钉钉消息
        dingtalk: {
          title: '',
          content: '',
          type: 'DINGTALK',
          annexes: []
        },
        // 站内信
        notice: {
          title: '',
          content: '',
          noticeImage: '',
          noticeAction: 'OPEN_WECHAT_APPLET',
          noticeActionLink: '',
          path: '', //新增path路径 后端出接口可以替换
          params: '', //新增参数字段 后端出接口可以替换
          type: 'NOTICE'
        },
        // 推送
        push: {
          title: '',
          content: '',
          pushType: 'OPEN_WECHAT_APPLET',
          link: '',
          path: '',
          params: '',
          type: 'PUSH',
          appJumpPage: null
        },
        // 弹屏
        playscreen: {
          bombScreenType: '',
          bombScreenImage: '',
          link: '',
          type: 'BOMB_SCREEN',
          bombScreenExpiryTime: ''
        }
      },
      // 选择用户校验
      userRules: {
        userType: {
          required: true,
          message: '请选择用户角色',
          trigger: 'change'
        },
        userRange: {
          required: true,
          validator: validateUserRange,
          trigger: 'change'
        },
        collegeIds: {
          required: true,
          validator: validateUserCollegeIds,
          message: '请选择学院',
          trigger: 'blur'
        },
        loginTime: {
          required: true,
          validator: validateLoginTime,
          message: '请选择登录时间',
          type: 'array'
        },
        userDataId: {
          validator: validUserDataId
        }
      },
      // 发送钉钉渠道校验
      dingtalkRules: {
        title: [
          { min: 1, max: 32, message: '标题最长32个字符', trigger: 'change' },
          { validator: validateDingTitle, trigger: 'change' }
        ],
        dingtalk: [{ validator: validateDingChannels, trigger: 'change' }],
        content: [{ validator: validateDingContent, trigger: 'blur' }]
      },
      // 发送短信渠道校验
      smsRules: {
        sms: [
          { required: true, validator: validateSmsChannels, trigger: 'change' }
        ],
        content: [{ validator: validateSmsContent, trigger: 'blur' }]
      },
      // 发送站内渠道校验
      noticeRules: {
        link: [
          {
            pattern:
              '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
            message: '请输入正确的详情链接url',
            trigger: 'blur'
          },
          { validator: validWechatId, trigger: ['change', 'blur'] }
        ],
        noticeImage: [{ validator: validateNoticePhoto, trigger: 'change' }],
        title: [
          { min: 1, max: 32, message: '标题最长32个字符', trigger: 'change' },
          { validator: validateNoticeTitle, trigger: 'change' }
        ],
        notice: [{ validator: validateNoticeChannels, trigger: 'change' }],
        content: [{ validator: validateNoticeContent, trigger: 'blur' }]
      },
      // 发送站内渠道校验
      pushRules: {
        title: [
          { min: 1, max: 32, message: '标题最长32个字符', trigger: 'change' },
          { validator: validatePushTitle, trigger: 'change' }
        ],
        push: [{ validator: validatePushChannels, trigger: 'change' }],
        content: [{ validator: validatePushContent, trigger: 'blur' }],
        link: [
          { validator: validatePushLink, trigger: 'change' },
          { validator: validaePatternLink, trigger: 'blur' },
          { validator: validatorPushActionLink, trigger: ['blur', 'change'] }
        ]
        // pushRules: [
        //   { validator: validatePushLink, trigger: 'change' },
        //   { validator: validaePatternLink, trigger: 'blur' },
        //   { validator: validatorPushActionLink, trigger: ['blur', 'change'] }
        // ],
        // pushActionLink: [
        //   { validator: validatorPushActionLink, trigger: ['blur', 'change'] }
        // ]
      },
      // 发送站内弹屏校验
      playscreenRules: {
        playscreen: [
          { validator: validatePlayscreenChannels, trigger: 'change' }
        ],
        bombScreenType: [{ validator: validateScreenPort, trigger: 'change' }],
        bombScreenImage: [
          { validator: validateScreenPhoto, trigger: 'change' }
        ],
        link: {
          pattern:
            '(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]',
          message: '请输入正确的详情链接url',
          trigger: 'blur'
        },
        bombScreenExpiryTime: [
          {
            validator: validateExpirationTime,
            trigger: 'change',
            required: 'true'
          }
        ]
      },
      // 发送时间校验
      timeRules: {
        sendTimeType: {
          required: true,
          message: '请选择发送时间',
          trigger: 'change'
        },
        sendTime: { validator: validateSendTime, trigger: 'change' }
      }
    }
  },
  components: {
    selectedNumDialog,
    resultDialog,
    importFilesDialog,
    studentGroupingDialog,
    uploadSingImg,
    CommonImportDialog,
    CommomSucessDialog,
    CommonFailDialog,
    PreviewVideo,
    'el-image-viewer': () =>
      import('element-ui/packages/image/src/image-viewer')
  },
  created() {
    if (this.$route.query.noticeChecked) {
      this.channelsList.notice.title = this.$route.query.noticeChecked.title
      this.channelsList.notice.content = this.$route.query.noticeChecked.content
    }
    if (this.$route.query.id) {
      let id = this.$route.query.id
      templateData(
        id,
        (res) => {
          let _this = this
          this.operateForm = res
          this.operateForm.status = res.status
          if (this.operateForm.configData.userType === 'STUDENT') {
            this.operateForm.configData.consultantConfig = {
              //顾问配置数据
              collegeIds: [], //学院ids
              userRange: 'ALL' //全部顾问/学院顾问
            }
            _this.dueDateToserviceTime(
              res.configData.studentConfig.loginTimeEnd,
              res.configData.studentConfig.loginTimeStart
            )
            _this.studentDialogData.selectionId =
              res.configData.studentConfig.groupIds
            _this.studentCount = res.configData.studentConfig.userIds.length
          }

          if (this.operateForm.configData.userType === 'CONSULTANT') {
            //选中顾问并且选中导入
            if (
              this.operateForm.configData.consultantConfig.userRange ===
              'IMPORT_CONSULTANT'
            ) {
              this.importSuccessNum = res.consultantCount
            }
            this.operateForm.configData.studentConfig = {
              //顾问配置数据
              collegeIds: [], //学院ids
              loginTimeEnd: null, //登录结束时间
              loginTimeStart: null, //登录开始时间
              userIds: [], //excel导入学员数据列表
              groupIds: [], //学生分组
              userRange: 'ALL' //全部
            }
          }
          _this.messageChannelsToChannelsList()
          // 当等于立即发送的时候 重置表单
          if (
            this.operateForm.status === 'WITHDRAWN' &&
            this.operateForm.configData.sendTimeType === 'SEND_IMMEDIATELY'
          ) {
            this.operateForm.configData.sendTimeType = ''
            //当等于指定发送时 清空时间  重置表单
          } else if (this.operateForm.status === 'WITHDRAWN') {
            this.operateForm.configData.sendTime = ''
          }
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'warning'
          })
        }
      )
    }
  },
  async mounted() {
    this.getColleges()
    this.getLastMobile()
    let data = await sysNormalDisable('app_jump_page')
    this.appJumpOption = this.appJumpOption.concat(data)
    this.signatures = await sysNormalDisable('dp_message_sign')
    this.getDataList()
    this.fileList = this.channelsList.dingtalk.annexes
  },
  watch: {
    'channelsList.notice.noticeAction': {
      handler(newVal, oldVal) {
        if (newVal) {
          this.channelsList.notice.noticeActionLink = ''
        }
      }
    }
  },
  filters: {
    calcStatusFilter(type) {
      return calcStatusDic[type].text
    }
  },
  methods: {
    clearConsultantCache() {
      this.clearCollegeConsultant()
    },
    clearCollegeConsultant() {
      this.operateForm.configData.consultantConfig.collegeIds = []
      this.consultantCheckAllCollege = false
      this.operateForm.userDataId = ''
      this.importSuccessNum = 0
    },
    changeUserType(val) {
      val === 'STUDENT'
        ? this.resetConsultantConfig()
        : this.resetStudentConfig()
    },
    resetStudentConfig() {
      const {
        collegeIds = [],
        loginTimeEnd = '',
        loginTimeStart = '',
        groupIds = [],
        userIds = [],
        userGroupList = [],
        userRange = null
      } = this.operateForm.configData.studentConfig
    },
    resetConsultantConfig() {
      const {
        collegeIds = [], //学院ids
        userRange = null, //全部顾问/学院顾问
        importNums = null
      } = this.operateForm.configData.consultantConfig
    },
    //markdown本地路径转url链接
    $imgAdd(pos, file) {
      let formdata = new FormData()
      formdata.append('file', file)
      uploadAccessory(
        formdata,
        (res) => {
          this.$refs['md'].$img2Url(pos, res[0].url)
        },
        (err) => {}
      )
    },
    getFileType(fileName) {
      // 后缀获取
      let suffix = ''
      // 获取类型结果
      let result = ''
      try {
        const flieArr = fileName.split('.')
        suffix = flieArr[flieArr.length - 1]
      } catch (err) {
        suffix = ''
      }
      // fileName无后缀返回 false
      if (!suffix) {
        return false
      }
      suffix = suffix.toLocaleLowerCase()
      // 图片格式
      const imglist = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      // 进行图片匹配
      result = imglist.find((item) => item === suffix)
      if (result) {
        return 'image'
      }
      // 匹配txt
      const txtlist = ['txt']
      result = txtlist.find((item) => item === suffix)
      if (result) {
        return 'txt'
      }
      // 匹配 excel
      const excelist = ['xls', 'xlsx']
      result = excelist.find((item) => item === suffix)
      if (result) {
        return 'excel'
      }
      // 匹配 word
      const wordlist = ['doc', 'docx']
      result = wordlist.find((item) => item === suffix)
      if (result) {
        return 'word'
      }
      // 匹配 pdf
      const pdflist = ['pdf']
      result = pdflist.find((item) => item === suffix)
      if (result) {
        return 'pdf'
      }
      // 匹配 ppt
      const pptlist = ['ppt', 'pptx']
      result = pptlist.find((item) => item === suffix)
      if (result) {
        return 'ppt'
      }
      // 匹配 视频
      const videolist = [
        'mp4',
        'm2v',
        'mkv',
        'rmvb',
        'wmv',
        'avi',
        'flv',
        'mov',
        'm4v'
      ]
      result = videolist.find((item) => item === suffix)
      if (result) {
        return 'video'
      }
      // 匹配 音频
      const radiolist = ['mp3', 'wav', 'wmv']
      result = radiolist.find((item) => item === suffix)
      if (result) {
        return 'radio'
      }
      // 其他 文件类型
      return 'other'
    },
    filterFileTypeImg(val) {
      let imgTypeList = ['png', 'jpg', 'jpeg', 'bmp', 'gif']
      let imgIndex = val.lastIndexOf('.')
      let imgType = val.substring(imgIndex + 1)
      return imgTypeList.includes(imgType)
    },
    filterFileTypeVedio(val) {
      let vedioTypeList = [
        'mp4',
        'm2v',
        'mkv',
        'rmvb',
        'wmv',
        'avi',
        'flv',
        'mov',
        'm4v'
      ]
      let vedioIndex = val.lastIndexOf('.')
      let vedioType = val.substring(vedioIndex + 1)
      return vedioTypeList.includes(vedioType)
    },
    filterFileTypeZip(val) {
      let zipTypeList = ['zip', 'rar']
      let zipIndex = val.lastIndexOf('.')
      let zipType = val.substring(zipIndex + 1)
      return zipTypeList.includes(zipType)
    },
    getFileSuffix(fileName) {
      let zipIndex = fileName.lastIndexOf('.')
      let zipType = fileName.substring(zipIndex + 1)
      return zipType
    },
    getFiles(file) {
      let fileTypes = ['jpg', 'jpeg', 'png', 'gif', 'mp4', 'zip', 'rar']
      if (file.size / 1024 / 1024 > 10) {
        this.$message.warning('请检查单个文件大小不能超过10M')
        return false
      }
      if (!fileTypes.includes(this.getFileSuffix(file.name))) {
        this.$message.warning('请检查上传文件类型')
        return false
      }
      if (
        file.size / 1024 / 1024 < 10 &&
        fileTypes.includes(this.getFileSuffix(file.name))
      ) {
        let formData = new FormData()
        formData.append('file', file)
        this.fileLoading = true
        uploadAccessory(
          formData,
          (res) => {
            let obj = {}
            obj.name = res[0].name
            obj.url = res[0].url
            this.$nextTick(() => {
              this.channelsList.dingtalk.annexes.unshift(obj)
              this.fileLoading = false
            })
          },
          (err) => {
            this.$message({
              type: 'warning',
              message: err.message
            })
            this.fileLoading = false
          }
        )
      }
    },
    deleteFile(index) {
      this.channelsList.dingtalk.annexes.splice(index, 1)
    },
    preview(index) {
      let fileType = this.getFileType(
        this.channelsList.dingtalk.annexes[index].url
      )
      if (fileType == 'image') {
        this.imgList = []
        this.showViewer = true
        this.imgList.push(this.channelsList.dingtalk.annexes[index].url)
      }
      if (fileType == 'video') {
        this.previewVideoParams.centerDialogVisible = true
        this.previewVideoParams.url = this.channelsList.dingtalk.annexes[
          index
        ].url
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 5 个文件`)
    },
    //批量导入
    bulkImport() {
      this.params.centerDialogVisible = true
    },
    //全部清空
    clearAllCounselor() {
      this.importSuccessNum = 0
      this.operateForm.userDataId = ''
    },
    importSuccess(val) {
      let operaConcatForm = this.operateForm.userDataId
        ? this.operateForm.userDataId.concat(',').concat(val.userDataId)
        : val.userDataId
      this.operateForm.userDataId = this.operateForm.userDataId
        ? Array.from(new Set(operaConcatForm.split(','))).join(',') //userdataid去重
        : val.userDataId
      this.params.centerDialogVisible = false
      this.successParams.centerDialogVisible = true
      this.importSuccessNum = val.importCount
      this.successParams.successText = `成功导入用户${val.importCount}人`
    },
    importFail(val) {
      this.params.centerDialogVisible = false
      this.failParams.centerDialogVisible = true
      this.failParams.failText = val
    },
    /* 获取菜单按钮并筛选出对应的权限 */
    getDataList() {
      let permsList = this.$store.state.permsList
      if (
        permsList.indexOf('wh:newUserGroup:DP') !== -1 ||
        permsList.indexOf('wh:newUserGroup:RULE') !== -1
      ) {
        this.userGroupingPermission = true
      }
    },
    getLastMobile() {
      let params = {}
      lastMobile(
        params,
        (res) => {
          this.userinfos = res
        },
        (err) => {}
      )
    },
    //  打开全局loading
    openFullLoading() {
      this.fullscreenLoading = this.$loading({
        lock: true,
        text: '正在计算短信金额',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    clearStudentCount(val) {
      if (val) {
        this.clearStudentCache()
        switch (val) {
          case 'ALL':
            this.viewsNum('allStu')
            break
          default:
            break
        }
      }
    },
    clearStudentCache() {
      this.operateForm.configData.studentConfig.collegeIds = []
      this.studentCheckAllCollege = false
      this.operateForm.configData.studentConfig.loginTimeStart = ''
      this.operateForm.configData.studentConfig.loginTimeEnd = ''
      this.loginTime = []
      this.studentCount = 0
      this.operateForm.configData.studentConfig.userIds = []
      this.operateForm.configData.studentConfig.userGroupList = []
    },
    // 到期时间转换
    dueDateToserviceTime(startTime, endTime) {
      if (startTime && endTime) {
        this.loginTime.push(startTime)
        this.loginTime.push(endTime)
      }
    },
    messageChannelsToChannelsList() {
      this.operateForm.messageChannels.forEach((item) => {
        // PUSH,NOTICE,SMS,DINGTALK,BOMB_SCREEN
        switch (item.type) {
          case 'SMS':
            this.smsChecked = true
            this.channelsList.sms = item
            break
          case 'DINGTALK':
            this.dingtalkChecked = true
            this.channelsList.dingtalk = item
            this.dingContent = item.content
            this.fileList = item.annexes
            break
          case 'NOTICE':
            this.noticeChecked = true
            this.channelsList.notice = item
            if (item.noticeAction === 'OPEN_WECHAT_APPLET') {
              let parseData = JSON.parse(item.noticeActionLink)
              const { id, path, params } = parseData
              this.channelsList.notice.noticeActionLink = id
              this.channelsList.notice.path = path
              this.channelsList.notice.params = params
            }
            break
          case 'PUSH':
            this.pushChecked = true
            this.channelsList.push = item
            if (item.pushType === 'OPEN_WECHAT_APPLET') {
              let parsePushData = JSON.parse(item.link)
              const { appletId, appletType, appletPath } = parsePushData
              let questionMarkIndex = appletPath.indexOf('?')
              this.channelsList.push.link = appletId
              this.channelsList.push.path = appletPath.substring(
                0,
                questionMarkIndex
              )
              this.channelsList.push.params = appletPath.substring(
                questionMarkIndex
              )
            }
            break
          case 'BOMB_SCREEN':
            this.playscreenChecked = true
            this.channelsList.playscreen = item
            break
          default:
            break
        }
      })
    },
    open(val) {
      let stringLength = this.channelsList.sms.content.length
      let money =
        stringLength > 70
          ? Math.ceil(stringLength / 67) * 0.03 * this.studentCount
          : 1 * 0.03 * this.studentCount
      let changeMoney = money.toFixed(2)
      if (this.studentCount < 300000) {
        if (
          this.channelsList.sms.type === 'SMS' &&
          this.channelsList.sms.content &&
          !this.channelsList.push.title
        ) {
          this.$confirm(
            `您选择${this.studentCount}个用户，发送短信预计消耗${changeMoney}元, 确定发送吗?`,
            '费用提示',
            {
              confirmButtonText: '我已确认',
              cancelButtonText: '我再想想',
              type: 'warning',
              center: true
            }
          )
            .then(() => {
              if (val == 'have') {
                this.compileSon()
              } else {
                this.saveSon()
              }
            })
            .catch(() => {
              return false
            })
        } else if (
          this.channelsList.push.type === 'PUSH' &&
          this.channelsList.push.title &&
          !this.channelsList.sms.content
        ) {
          this.$confirm(
            `您选择${this.studentCount}个用户，发送推送会消耗费用, 确定发送吗?`,
            '费用提示',
            {
              confirmButtonText: '我已确认',
              cancelButtonText: '我再想想',
              type: 'warning',
              center: true
            }
          )
            .then(() => {
              if (val == 'have') {
                this.compileSon()
              } else {
                this.saveSon()
              }
            })
            .catch(() => {
              return false
            })
        } else if (
          this.channelsList.sms.type === 'SMS' &&
          this.channelsList.sms.content &&
          this.channelsList.push.type === 'PUSH' &&
          this.channelsList.push.title
        ) {
          this.$confirm(
            `您选择${this.studentCount}个用户，发送短信和推送预计至少消耗${changeMoney}元, 确定发送吗?`,
            '费用提示',
            {
              confirmButtonText: '我已确认',
              cancelButtonText: '我再想想',
              type: 'warning',
              center: true
            }
          )
            .then(() => {
              if (val == 'have') {
                this.compileSon()
              } else {
                this.saveSon()
              }
            })
            .catch(() => {
              return false
            })
        } else {
          if (val == 'have') {
            this.compileSon()
          } else {
            this.saveSon()
          }
        }
      } else if (this.studentCount > 300000) {
        if (
          (this.channelsList.sms.type === 'SMS' &&
            this.channelsList.sms.content) ||
          (this.channelsList.push.type === 'PUSH' &&
            this.channelsList.push.title)
        ) {
          this.$confirm(
            `因风险控制，单次发送短信或推送人数不可超过30万,您选择了个${this.studentCount}用户`,
            '风险提示',
            {
              confirmButtonText: '我已确认',
              cancelButtonText: '我再想想',
              type: 'warning',
              center: true
            }
          )
            .then(() => {
              if (val == 'have') {
                this.compileSon()
              } else {
                this.saveSon()
              }
            })
            .catch(() => {
              return false
            })
        } else {
          if (val == 'have') {
            this.compileSon()
          } else {
            this.saveSon()
          }
        }
      }
    },
    // 取消
    cancle() {
      this.clearTag()
    },
    /*退出*/
    signOut() {
      this.$router.go(-1)
    },
    changeChain(val) {
      if (val == 'sms') {
        let params = {}
        var _this = this
        params.longURL = this.smsLink
        turnChain(
          params,
          (res) => {
            if (
              _this.channelsList.sms.content.length +
                ` ${res.shortURL} `.length >
              195
            ) {
              this.$message({
                message: '短信编辑内容字数不能超过195',
                type: 'warn'
              })
              return false
            }
            _this.channelsList.sms.content =
              _this.channelsList.sms.content + ` ${res.shortURL} `
            _this.smsLink = ''
          },
          (err) => {
            this.$message({
              message: '转链失败',
              type: 'warn'
            })
          }
        )
      }
      if (val == 'ding') {
        let params = {}
        var _this = this
        params.longURL = this.dingLink
        turnChain(
          params,
          (res) => {
            if (
              _this.channelsList.dingtalk.content.length +
                ` ${res.shortURL} `.length >
              195
            ) {
              this.$message({
                message: '钉钉编辑内容字数不能超过195',
                type: 'warn'
              })
              return false
            }
            _this.channelsList.dingtalk.content =
              _this.channelsList.dingtalk.content + ` ${res.shortURL} `
            _this.dingLink = ''
          },
          (err) => {
            this.$message({
              message: '转链失败',
              type: 'warn'
            })
          }
        )
      }
    },
    // 全部清空
    clearAll() {
      this.studentCount = 0
      this.operateForm.configData.studentConfig.userIds = []
    },
    // 获取已经发布学院列表
    getColleges() {
      let params = {}
      collegeList(
        params,
        (res) => {
          this.colleges = res
        },
        (err) => {}
      )
    },
    showResults(res, val, type) {
      if (val) {
        if (type === 'dps') {
          if (this.studentCount + res.length > 300000) {
            this.$message({
              message: '最大导入条数不能超过300000条',
              type: 'warn'
            })
            return false
          } else {
            this.studentCount = this.studentCount + res.length
          }
          this.dataReault.isSuccess = true
          this.dataReault.isShow = true
          this.dataReault.importSucess = res.length
          this.dataReault.type = 'dps'
          this.operateForm.configData.studentConfig.userIds = this.operateForm.configData.studentConfig.userIds.concat(
            res
          )
        } else {
          if (this.studentCount + res.studentIdCount > 300000) {
            this.$message({
              message: '最大导入条数不能超过300000条',
              type: 'warn'
            })
            return false
          } else {
            this.studentCount = this.studentCount + res.studentIdCount
          }
          this.dataReault.isSuccess = true
          this.dataReault.isShow = true
          this.dataReault.type = 'uds'
          this.dataReault.importSucess = res.studentIdCount
          this.dataReault.cutCoyp = res.distinctStudentIdCount
          this.operateForm.configData.studentConfig.userIds = this.operateForm.configData.studentConfig.userIds.concat(
            res.studentIds
          )
        }
      }
      if (!val) {
        this.dataReault.isSuccess = false
        this.dataReault.isShow = true
        this.dataReault.importFail = res.message
      }
    },
    // 编辑保存方法
    compileSon() {
      var _this = this
      const {
        userGroupList,
        groupIds
      } = this.operateForm.configData.studentConfig
      for (var item in userGroupList) {
        groupIds.push(userGroupList[item].id)
      }
      delete this.operateForm.configData.studentConfig.userGroupList
      let obj = Object.assign({}, this.operateForm)
      let id = this.$route.query.id
      compileOperation(
        id,
        obj,
        (res) => {
          this.$message({
            message: '编辑成功',
            type: 'success'
          })
          _this.operateForm.messageChannels = []
          this.clearTag()
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'warn'
          })
          _this.operateForm.messageChannels = []
          return false
        }
      )
    },
    //  保存方法
    saveSon() {
      var _this = this
      const {
        userGroupList,
        groupIds
      } = this.operateForm.configData.studentConfig
      for (var item in userGroupList) {
        groupIds.push(userGroupList[item].id)
      }
      delete this.operateForm.configData.studentConfig.userGroupList
      let obj = Object.assign({}, this.operateForm)
      _this.isDisabled = true
      setTimeout(() => {
        _this.isDisabled = false
      }, 2000)
      createTemplate(
        obj,
        (res) => {
          this.$message({
            message: '创建模板成功',
            type: 'success'
          })
          _this.operateForm.messageChannels = []
          this.clearTag()
        },
        (err) => {
          this.$message({
            message: err.message,
            type: 'warn'
          })
          _this.operateForm.messageChannels = []
          return false
        }
      )
    },
    // 选择渠道对象转换为传参数组
    channelsListToMessageChannels() {
      let messageChannels = []
      if (this.smsChecked) {
        messageChannels.push(this.channelsList.sms)
      }
      switch (this.operateForm.configData.userType) {
        // 通知用户类型=>顾问
        case 'CONSULTANT':
          if (this.dingtalkChecked) {
            this.channelsList.dingtalk.content = this.dingContent.replace(
              /\n/g,
              '  \n'
            )
            messageChannels.push(this.channelsList.dingtalk)
          }
          break
        // 通知用户类型=>学员
        case 'STUDENT':
          // let studentTypes = [
          //   'notice',
          //   'push',
          //   'playscreen'
          // ]
          // studentTypes.forEach((item) => {
          //   if (this[item + 'Checked']) {
          //     messageChannels.push(this.channelsList[item])
          //   }
          // })
          if (this.noticeChecked) {
            let copyNotice = { ...this.channelsList.notice }
            if (copyNotice.noticeAction === 'OPEN_WECHAT_APPLET') {
              const { noticeActionLink, path, params } = copyNotice
              let obj = {}
              obj.id = noticeActionLink
              obj.path = path
              obj.params = params
              copyNotice.noticeActionLink = JSON.stringify(obj)
              delete copyNotice.path
              delete copyNotice.params
            }
            messageChannels.push(copyNotice)
          }
          if (this.pushChecked) {
            let copyPush = { ...this.channelsList.push }
            if (this.channelsList.push.pushType === 'OPEN_WECHAT_APPLET') {
              const { link, path, params } = copyPush
              let obj = {}
              obj.appletId = link
              obj.appletType = ''
              obj.appletPath = `${path}?${params}`
              copyPush.link = JSON.stringify(obj)
              delete copyPush.path
              delete copyPush.params
            }
            messageChannels.push(copyPush)
          }
          if (this.playscreenChecked) {
            messageChannels.push(this.channelsList.playscreen)
          }
          break
        default:
          break
      }
      this.operateForm.messageChannels = messageChannels
    },
    async saveTemp() {
      let _this = this
      let operateForm = false
      let userForm = false
      let channelsForm = false
      let timeForm = false
      this.$refs['operateForm'].validate((valid) => {
        if (valid) {
          operateForm = true
        }
      })
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          userForm = true
        }
      })
      this.$refs['timeForm'].validate((valid) => {
        if (valid) {
          timeForm = true
        }
      })
      // 判断通知用户类型 => 学员
      if (this.operateForm.configData.userType === 'STUDENT') {
        if (
          !this.smsChecked &&
          !this.noticeChecked &&
          !this.pushChecked &&
          !this.playscreenChecked
        ) {
          this.$refs['smsForm'].validate((valid) => {
            if (!valid) {
              return false
            }
          })
          this.$refs['noticeForm'].validate((valid) => {
            if (!valid) {
              return false
            }
          })
          this.$refs['pushForm'].validate((valid) => {
            if (!valid) {
              return false
            }
          })
          this.$refs['playscreenForm'].validate((valid) => {
            if (!valid) {
              return false
            }
          })
        } else {
          channelsForm = true
        }
      }
      // 判断通知用户类型 => 顾问
      if (this.operateForm.configData.userType === 'CONSULTANT') {
        if (!this.smsChecked && !this.dingtalkChecked) {
          this.$refs['smsForm'].validate((valid) => {
            if (!valid) {
              return false
            }
          })
          this.$refs['dingtalkForm'].validate((valid) => {
            if (!valid) {
              return false
            }
          })
        } else {
          channelsForm = true
        }
      }

      if (!timeForm || !userForm || !operateForm || !channelsForm) {
        return false
      }

      // 端口与弹屏图片与弹屏到期时间校验
      if (this.playscreenChecked) {
        const {
          bombScreenImage,
          bombScreenType,
          bombScreenExpiryTime
        } = this.channelsList.playscreen
        if (
          bombScreenImage === '' ||
          bombScreenType === '' ||
          bombScreenExpiryTime === ''
        ) {
          return false
        }
      }

      this.channelsListToMessageChannels()
      if (
        this.operateForm.configData.userType == 'STUDENT' &&
        this.operateForm.configData.studentConfig.userRange == 'COLLEGE_STUDENT'
      ) {
        this.openFullLoading()
        await this.viewsNum('xueyuan').then((res) => {
          _this.studentCount = res
          _this.fullscreenLoading.close()
        })
      } else if (
        this.operateForm.configData.userType == 'CONSULTANT' &&
        this.operateForm.configData.consultantConfig.userRange ==
          'COLLEGE_CONSULTANT'
      ) {
        this.openFullLoading()
        await this.viewsNum('guwen').then((res) => {
          _this.studentCount = res
          _this.fullscreenLoading.close()
        })
      } else if (
        this.operateForm.configData.userType == 'STUDENT' &&
        this.operateForm.configData.studentConfig.userRange ==
          'GROUPING_STUDENT'
      ) {
        this.openFullLoading()
        await this.viewsNum('fenzu').then((res) => {
          _this.studentCount = res
          _this.fullscreenLoading.close()
        })
      }

      if (this.$route.query.id) {
        if (this.smsChecked) {
          if (
            this.operateForm.configData.userType == 'CONSULTANT' &&
            this.operateForm.configData.consultantConfig.userRange == 'ALL'
          ) {
            this.compileSon()
          } else {
            //如果是撤回的消息状态就调用新增
            if (this.operateForm.status === 'WITHDRAWN') {
              _this.open('nohave')
            } else {
              _this.open('have')
            }
          }
        } else {
          //如果是撤回的消息状态就调用新增
          if (this.operateForm.status === 'WITHDRAWN') {
            _this.open('nohave')
          } else {
            this.compileSon()
          }
        }
      } else {
        if (this.smsChecked) {
          if (
            this.operateForm.configData.userType == 'CONSULTANT' &&
            this.operateForm.configData.consultantConfig.userRange == 'ALL'
          ) {
            this.saveSon()
          } else {
            this.open('nohave')
          }
        } else if (this.pushChecked) {
          this.open('nohave')
        } else {
          this.saveSon()
        }
      }
    },

    handleImport() {
      // this.importDialogData.url = uploadFile() // 导入接口
      // this.importDialogData.downUrl = download() // 下载模板接口
      this.importDialogData.isShow = true // 显示导入弹框
      // this.importDialogData.title = '批量导入'
    },
    //学员选择分组
    handleGrouping() {
      this.studentDialogData.isShow = true // 显示学员分组弹框
      this.studentDialogData.userGroupList = this.operateForm.configData
        .studentConfig.userGroupList
        ? [...this.operateForm.configData.studentConfig.userGroupList]
        : [] //列表数据带到分组弹窗中
      // this.importDialogData.title = '批量导入'
    },
    // 学员创建分组跳转
    createGrouping() {
      this.$router.push({ path: '/userGroup/userGroupManage' })
    },
    //获取学员分组数据
    selectGroup(selectionId, checkData, showCheckData) {
      this.operateForm.configData.studentConfig.userGroupList = undefined
      this.operateForm.configData.studentConfig.userGroupList = new Array()
      this.operateForm.configData.studentConfig.groupIds = undefined
      this.operateForm.configData.studentConfig.groupIds = new Array()
      this.$nextTick(() => {
        this.operateForm.configData.studentConfig.userGroupList = checkData
        this.studentDialogData.selectionId = selectionId //列表数据带到分组弹窗中
      })
    },
    viewsNum(val, isView) {
      let _this = this
      // 学员而且全部学员下的查看人数
      if (val == 'allStu') {
        if (isView) {
          _this.loading = true
        }

        let params = {}
        studentAllStudent(
          params,
          (res) => {
            if (isView) {
              _this.formLimit.visible = true
            }
            //  获得人数
            _this.studentCount = res
            _this.formLimit.value = `您本次选择了${res}人`
            _this.loading = false
          },
          (err) => {
            _this.loading = false
          }
        )
      } else if (val == 'time') {
        // 学员而且登录时间下的查看人数
        // 当没有选择登陆时间 去查看人数需要被限制
        if (this.loginTime == '') {
          this.$message({
            message: '请选择登录时间',
            type: 'warning'
          })
          return
        }
        if (isView) {
          _this.loading = true
        }
        let params = {}
        params.endDate = this.operateForm.configData.studentConfig.loginTimeEnd
        params.startDate = this.operateForm.configData.studentConfig.loginTimeStart
        LoginTimeStudentCount(
          params,
          (res) => {
            if (isView) {
              _this.formLimit.visible = true
            }
            _this.studentCount = res
            _this.formLimit.value = `您本次选择了${res}人`
            _this.loading = false
          },
          (err) => {
            this.$message({
              message: '请选择登录时间',
              type: 'warn'
            })
            _this.loading = false
            return false
          }
        )
      } else if (val == 'xueyuan') {
        // 选中学员并且至少选择一个学院下的查看人数
        if (_this.operateForm.configData.studentConfig.collegeIds == '') {
          this.$message({
            message: '请选择至少一个学院',
            type: 'warning'
          })
          return false
        }
        if (isView) {
          _this.loading = true
        }
        return new Promise(function(resolve, reject) {
          let params = {}
          params.collegeIds = _this.operateForm.configData.studentConfig.collegeIds.join(
            ','
          )
          collegeGetAllStudent(
            params,
            (res) => {
              if (isView) {
                _this.formLimit.visible = true
              }
              _this.studentCount = res
              _this.formLimit.value = `您本次选择了${res}人`
              _this.loading = false
              resolve(res)
            },
            (err) => {
              _this.loading = false
            }
          )
        })
      } else if (val == 'fenzu') {
        // 学员分组人数计算
        let _this = this
        if (isView) {
          _this.loading = true
        }

        let sum = 0
        if (_this.operateForm.configData.studentConfig.userGroupList) {
          for (
            let index = 0;
            index <
            _this.operateForm.configData.studentConfig.userGroupList.length;
            index++
          ) {
            sum +=
              _this.operateForm.configData.studentConfig.userGroupList[index]
                .totalNumber
          }
          return new Promise(function(resolve, reject) {
            if (isView) {
              _this.formLimit.visible = true
            }
            _this.formLimit.value = `您本次选择了${sum}人`
            _this.studentCount = sum
            _this.loading = false
            resolve(sum)
          })
        } else {
          return Promise.resolve(sum)
        }
      } else if (val == 'guwen') {
        if (this.operateForm.configData.consultantConfig.collegeIds == '') {
          this.$message({
            message: '请至少选择一个学院',
            type: 'warning'
          })
          return false
        }
        if (isView) {
          _this.loading = true
        }
        // 顾问下只有一个地方有查看人数
        // 顾问的时候人数的接口
        return new Promise(function(resolve, reject) {
          let params = {}
          params.collegeIds = _this.operateForm.configData.consultantConfig.collegeIds.join(
            ','
          )
          counselorNum(
            params,
            (res) => {
              if (isView) {
                _this.formLimit.visible = true
              }
              _this.studentCount = res
              _this.formLimit.value = `您本次选择了${res}人`
              _this.loading = false
              resolve(res)
            },
            (err) => {
              _this.loading = false
            }
          )
        })
      }
    },
    handleConsultantCheckAll(val) {
      this.$nextTick(() => {
        let arr = this.colleges.map((item) => {
          return item.id
        })
        this.operateForm.configData.consultantConfig.collegeIds = val ? arr : []
        this.isConsultantIndeterminate = false
        this.$refs['userForm'].validateField('collegeIds')
      })
      if (val) {
        this.viewsNum('guwen')
      }
    },
    handleStudentCheckAll(val) {
      if (val) {
        let arr = this.colleges.map((item) => {
          return item.id
        })
        this.operateForm.configData.studentConfig.collegeIds = val ? arr : []
        this.viewsNum('xueyuan')
      }
      this.$nextTick(() => {
        let arr = this.colleges.map((item) => {
          return item.id
        })
        this.operateForm.configData.studentConfig.collegeIds = val ? arr : []
        this.isStudentIndeterminate = false
        this.$refs['userForm'].validateField('collegeIds')
      })
    },
    handleStudentCheckedChange(value) {
      // 延迟更新到下次dom更新结束
      this.$nextTick(() => {
        let checkedCount = value.length
        this.studentCheckAllCollege = checkedCount === this.colleges.length
        this.isStudentIndeterminate =
          checkedCount > 0 && checkedCount < this.colleges.length
        this.$refs['userForm'].validateField('collegeIds')
      })
      // this.viewsNum('xueyuan')
    },
    handleConsultantCheckedChange(value) {
      // 延迟更新到下次dom更新结束
      this.$nextTick(() => {
        let checkedCount = value.length
        this.consultantCheckAllCollege = checkedCount === this.colleges.length
        this.isConsultantIndeterminate =
          checkedCount > 0 && checkedCount < this.colleges.length
        this.$refs['userForm'].validateField('collegeIds')
      })
      this.viewsNum('guwen')
    },
    handleLoginTimeChange(val) {
      if (val) {
        this.operateForm.configData.studentConfig.loginTimeStart = val[0]
        this.operateForm.configData.studentConfig.loginTimeEnd = val[1]
      } else {
        this.operateForm.configData.studentConfig.loginTimeStart = ''
        this.operateForm.configData.studentConfig.loginTimeEnd = ''
      }
      this.viewsNum('time')
    },
    smsCheckedChange(val) {
      if (val) {
        this.$refs['smsForm'].validate()
        switch (this.operateForm.configData.userType) {
          case 'CONSULTANT':
            this.$refs['dingtalkForm'].validateField('dingtalk', (errMsg) => {})
            break
          case 'STUDENT':
            this.$refs['noticeForm'].validateField('notice', (errMsg) => {})
            this.$refs['pushForm'].validateField('push', (errMsg) => {})
            this.$refs['playscreenForm'].validateField(
              'playscreen',
              (errMsg) => {}
            )
            break
          default:
            break
        }
      } else {
        this.$refs['smsForm'].resetFields()
      }
    },
    dingCheckedChange(val) {
      if (val) {
        this.$refs['dingtalkForm'].validate()
        this.$refs['smsForm'].validateField('sms', (errMsg) => {})
      } else {
        this.$refs['dingtalkForm'].resetFields()
      }
    },
    noticeCheckedChange(val) {
      if (val) {
        this.$refs['noticeForm'].validate()
        this.$refs['smsForm'].validateField('sms', (errMsg) => {})
        this.$refs['pushForm'].validateField('push', (errMsg) => {})
        this.$refs['playscreenForm'].validateField('playscreen', (errMsg) => {})
      } else {
        this.$refs['noticeForm'].resetFields()
      }
    },
    playscreenCheckedChange(val) {
      if (val) {
        this.$refs['playscreenForm'].validate((res) => {})
        this.$refs['noticeForm'].validateField('notice', (errMsg) => {})
        this.$refs['smsForm'].validateField('sms', (errMsg) => {})
        this.$refs['pushForm'].validateField('push', (errMsg) => {})
      } else {
        this.channelsList.playscreen.bombScreenImage = ''
        this.$refs['playscreenForm'].resetFields()
      }
    },
    async pushTypeChange(val) {
      this.channelsList.push.link = ''
      this.channelsList.push.params = ''
      this.channelsList.push.path = ''
      if (val === 'OPEN_APP_LINK') {
        this.channelsList.push.appJumpPage = null
        this.appJumpOption = []
        let data = await sysNormalDisable('app_jump_page')
        this.appJumpOption = this.appJumpOption.concat(data)
      } else {
        this.appJumpOption = []
      }
    },
    async noticeTypeChange(val) {
      this.$refs['noticeForm'].validateField('link', (errMsg) => {})
      this.channelsList.notice.noticeActionLink = ''
      this.channelsList.notice.path = ''
      this.channelsList.notice.params = ''
      // this.$refs['noticeForm'].validate()
    },
    pushCheckedChange(val) {
      if (val) {
        this.$refs['pushForm'].validateField('title', (errMsg) => {})
        this.$refs['noticeForm'].validateField('notice', (errMsg) => {})
        this.$refs['pushForm'].validate()
        this.$refs['smsForm'].validateField('sms', (errMsg) => {})
        this.$refs['noticeForm'].validateField('notice', (errMsg) => {})
        this.$refs['playscreenForm'].validateField('playscreen', (errMsg) => {})
      } else {
        this.$refs['pushForm'].resetFields()
      }
    },
    //封面图设置
    getImgUrl(url) {
      this.channelsList.playscreen.bombScreenImage = url
      this.$refs['playscreenForm'].validateField(
        'bombScreenImage',
        (errMsg) => {}
      )
    },
    //站内信图片设置
    getNoticeImgUrl(url) {
      this.channelsList.notice.noticeImage = url
      this.$refs['noticeForm'].validateField('noticeImage', (errMsg) => {})
    },
    handleTipClick() {
      this.$alert(
        '<p>应工信部和运营商要求，正常发送短信必须遵守以下规则：</p><p>短信格式：【签名】+内容+退订回T，系统自带【退订回T】，您只需要输入签名和内容。</p><p>签名格式：2~12个字，由中英文，数字组成，不支持符号，不支持全英文或全数字。</p><p>短信费用：含签名，退订回T在内, 70字以内按1条计费;超过70字，按长短信发送,每67字按一条计费,长字符会显示一条短信。</p><p>短信链接：自行编辑的链接首尾需用英文空格与文字内容隔开，使用【转链并插入】插入的链接首尾自带空格。</p>',
        '短信规则',
        {
          confirmButtonText: '确定',
          dangerouslyUseHTMLString: true,
          callback: () => {}
        }
      )
    },
    handleSignatureChange(value) {
      if (this.channelsList.sms.content.startsWith('【')) {
        let strs = this.channelsList.sms.content.split('】')
        strs.shift()
        this.channelsList.sms.content = `${value}${strs.join('】')}`
      } else {
        this.channelsList.sms.content = `${value}${this.channelsList.sms.content}`
      }
    },
    handleUserinfoChange() {
      if (this.userinfo) {
        this.channelsList.sms.content = `${this.channelsList.sms.content}${this.userinfo}`
      }
    },
    handleSmsContentChange(value) {
      if (!value.startsWith('【')) {
        this.channelsList.sms.signature = undefined
      }
    },
    sendTimeTypeChange(val) {
      if (val === 'SEND_IMMEDIATELY') {
        this.operateForm.configData.sendTime = ''
      } else if (val === 'TIMED_SENDING') {
        this.operateForm.configData.sendTime = ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
.wx-text {
  display: flex;
  // border: 1px solid black;
  justify-content: space-around;
  font-size: 12px;
}
.wx-text-inner {
  :deep(.el-form-item__error) {
    margin-left: 10px;
  }
}
.wx-text-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.icon {
  width: 50px;
  height: 50px;
}
.commonFlexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fileListFlex {
  width: 20%;
  display: flex;
  justify-content: flex-start;
  .fileItemLeft {
    width: 30%;
    height: 100%;
    .commonFlexCenter();
  }
  .fileItemRight {
    width: 35%;
    height: 100%;
    .itemRightTop {
      height: 50%;
      .commonFlexCenter();
    }
    .itemRightBottom {
      display: flex;
      justify-content: space-around;
      height: 50%;
    }
  }
}
.fileHintSize {
  font-size: 12px;
}
.mavonEditor {
  width: 100%;
  height: 100%;
}
.delete-color {
  cursor: pointer;
  color: red;
}
.preview-color {
  cursor: pointer;
  color: #1dc8a4;
}
.quill-box {
  margin-bottom: 30px;
}

.customClass {
  color: #f56c6c;
  font-size: 20px;
}
.hint {
  margin-left: 100px;
  width: 650px;
}
.el-card .header {
  border: 2px solid red;
}
:deep(.el-form-item__error) {
  margin-left: 100px;
}
:deep(.el-form-item__content) {
  margin-left: 200px !important;
}
:deep(.el-button--text) {
  color: #03be91 !important;
}
:deep(.el-message-box) {
  width: 820px !important;
}
:deep(.el-button--primary) {
  background: #03be91 !important;
  border-color: #68cab3 !important;
}
.col_title {
  color: rgb(51, 51, 51);
  font-size: 20px;
  font-weight: 700;
}
.mt_10 {
  margin-top: 10px;
}
.col {
  display: flex !important;
  flex-direction: column !important;
}
.row_center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.clearAll {
  cursor: pointer;
  margin: 0 0 10px 0px;
  width: 100px;
  height: 30px;
  color: white;
  background: rgba(29, 200, 164, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.batch {
  cursor: pointer;
  width: 100px;
  height: 30px;
  color: white;
  background: rgba(29, 200, 164, 1);
  display: flex;
  justify-content: center;
  align-items: center;
}
.totalNum {
  display: flex;
  margin-left: 100px;
  width: 400px;
  justify-content: space-around;
}
/*学员分组样式*/
.studentGrouping {
  display: flex;
  margin-left: 100px;
  width: 600px;
  flex-direction: column;
  justify-content: space-around;
  &__btn {
    display: flex;
    flex-direction: row;
  }
}
.table-box {
  margin-top: 20px;
}
.view-total {
  color: #03af81;
  width: 100px;
  margin-left: 100px;
  cursor: pointer;
}
.temp-container {
  display: grid;
  grid-template-columns: repeat(100%);
  .table {
    width: 500px;
    height: 100px;
    td th {
      text-align: center;
    }
  }
}
.form-item {
  margin-left: 100px;
}
.channel-wrap {
  margin-left: 90px;
  & > p {
    margin: 0 0 0 10px;
    color: red;
  }
  .channel-checkbox {
    margin-left: 10px;
    border-bottom: #03af81 solid 2px;
  }
}
.userinfo-btn {
  margin-left: 10px;
}
.header-tip {
  float: right;
}
.channel-content {
  margin-left: 100px;
  .channel-content_label {
    margin-right: 20px;
    width: 100px;
    text-align: left;
    display: block;
    float: left;
  }
  .label-student:before {
    content: '*';
    color: #f56c6c;
    margin-right: 4px;
  }
}
.link-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 100px;
  .short-link {
    margin-right: 30px;
  }
  .short-link-btn {
    width: 100px;
    height: 30px;
    margin-left: 20px;
    background: rgba(29, 200, 164, 1);
    color: white;
    cursor: pointer;
  }
}
.push-content {
  // margin-left: 100px;
  // display: flex;
  // & > span {
  //   margin-right: 30px;
  // }
  // .push-content_input {
  //   // width: 50%;
  //   flex: 1;
  //   margin-left: 20px;
  // }
}
.playscreen-wrap {
  margin-left: 100px;
}
</style>
